<template>
	<view>
		<cu-custom :bgLinerBorder="true" :isBlack="false">
			<block slot="content">餐厅说明</block>
		</cu-custom>
		<view class="contents">
			<view class="wrap ">
				<view class="fontBold f-16 orange m-b-10">
					餐厅说明
				</view>
				<scroll-view scroll-x="true" style="white-space: nowrap;">
					<view class="flex">
						<view class="m-r-10" v-for="(item,index) in banner" :key="index" @click="preImg(banner,index)">
							<view class="flex align-center">
								<image :src="item" class="chef-img" mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="black-6 p-r-10 m-t-10" >
					<view v-html="info.parking_instructions"></view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				info:{},
				banner:[]
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.getInfo();
		},
		methods: {
			getInfo(){
				let data = {
					shop_id:this.id
				}
				this.$http('/apicloud/Shop/shopInfo',data).then(res=>{
					if(res.code == 200){
						let datas = res.data;
						this.info = datas.info;
						if(this.info.parking_instructions){
							let reg = new RegExp('<img','gi');
							this.info.parking_instructions = this.info.parking_instructions.replace(reg,'<img style="width:100%;vertical-align: top;"');
						};
						this.banner = this.info.cover?this.info.cover.split(','):[];
					}
				})
			},
			preImg(urls,current){
				uni.previewImage({
					urls,
					current
				})
			}
		}
	}
</script>

<style lang="less">
	.wrap{
		background: #FFFFFF;
		box-shadow: 0px 0px 16px rgba(0,0,0,0.05);
		border-radius: 16rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		padding-left: 20rpx;
	}
	.chef-img{
		width: 180rpx;
		height: 180rpx;
		border-radius: 16rpx;
	}
</style>
